<template>
  <div class="home">
    <a-breadcrumb style="height: 30px;background: #fff;">
      <a-breadcrumb-item>
        <router-link to="/">工作台</router-link>
      </a-breadcrumb-item>
      <router-link to="/SystemAdministration">系统设置</router-link>
    </a-breadcrumb>

    <div style="width:1240px;height:700px;
      background: #fff;
      margin: 20px 25px;
      ">
      <!-- <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
  
    <el-radio-button label="left"></el-radio-button>
      </el-radio-group>-->

      <el-tabs
        :tab-position="tabPosition"
        style="height: 700px;padding: 10px ;
  margin: 10px;"
        class="demo-tabs"
      >
        <el-tab-pane label="系统设置">
          <p style="display:flex;
flex-direction: column;
padding-left: 10px;">
            <span>系统地址</span>
            <input
              style="margin-top:8px;
width: 1070px;
height: 35px;
border: solid 1px #ccc;
outline: none;
padding-left: 6px;
"
              type="text"
              v-model="di"
            />
          </p>

          <p style="display:flex;
flex-direction: column;
margin-left: 8px;
margin-top: 20px;
">
            <span>后台地址</span>
            <input
              style="margin-top:8px;width: 1070px;height: 35px;border: solid 1px #ccc;outline: none;padding-left: 10px;"
              v-model="di1"
              type="text"
            />
          </p>

          <p style="display:flex;flex-direction: column;padding-left: 10px;margin-top: 20px;">
            <span>系统标题</span>
            <input
              style="margin-top:8px;width: 1070px;height: 35px;border: solid 1px #ccc;outline: none;"
              v-model="di2"
              type="text"
            />
          </p>

          <p style="display:flex;
flex-direction: column;
padding-left: 10px;
margin-top: 20px;
">
            <span>Logo</span>
            <a-input-group compact>
              <a-input v-model:value="value" style="width: calc(100% - 33px)" />
              <a-tooltip title="copy git url">
                <a-button>
                  <template #icon>
                    <CopyOutlined />
                  </template>
                </a-button>
              </a-tooltip>
            </a-input-group>
          </p>
          <p style="display:flex;
flex-direction: column;
padding-left: 10px;
margin-top: 20px;
">
            <span>Favicon</span>
            <a-input-group compact>
              <a-input v-model:value="value1" style="width: calc(100% - 33px)" />
              <a-tooltip title="copy git url">
                <a-button>
                  <template #icon>
                    <CopyOutlined />
                  </template>
                </a-button>
              </a-tooltip>
            </a-input-group>
          </p>
          <p style="display:flex;
flex-direction: column;
padding-left: 10px;
margin-top: 20px;
">
            <span>页脚信息</span>
            <el-input v-model="ye" :rows="9" type="textarea" />
          </p>
          <p style="padding-left: 10px;
margin-top: 20px;">
            <button
              style="width:80px;height:40px;
background: dodgerblue;border: none;color:#fff"
            >保存</button>
          </p>
        </el-tab-pane>
        <el-tab-pane label="国际化设置">Config</el-tab-pane>
        <el-tab-pane label="SEO设置">
          <div>
            <p style="display:flex;
flex-direction: column;
padding-left: 10px;">
              <span>关键词</span>
              <input
                style="margin-top:8px;width: 1070px;height: 35px;border: solid 1px #ccc;outline: none;padding-left: 6px;"
                type="text"
                v-model="ci"
              />
            </p>
            <p style="display:flex;
flex-direction: column;
padding-left: 10px;
margin-top: 20px;
">
              <span>页脚信息</span>
              <el-input v-model="xi" :rows="5" type="textarea" />
            </p>
            <button
              style="width:80px;height:40px;
background: dodgerblue;border: none;color:#fff;margin-left: 10px;"
            >保存</button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="数据统计">
          <div>
            <p style="display:flex;
flex-direction: column;
padding-left: 10px;">
              <span>百度统计</span>
              <input
                style="margin-top:8px;width: 1070px;height: 35px;border: solid 1px #ccc;outline: none;padding-left: 6px;"
                type="text"
                v-model="ji"
              />
            </p>
            <p style="display:flex;
flex-direction: column;
padding-left: 10px;
margin-top: 20px;
">
              <span>谷歌分析</span>
              <el-input v-model="xi1" type="text" />
            </p>
            <button
              style="width:80px;height:40px;
background: dodgerblue;border: none;color:#fff;margin-left: 10px;"
            >保存</button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="OSS设置">
          
          <a-alert
            message="说明"
            description="请在编辑器中输入您的 oss 配置，并添加 type 字段区分 {type:aliyun,accessKeyId:,accessKeySecret:,bucket:,https:true,region:}"
            type="info"
            show-icon
          />
        </el-tab-pane>

        <el-tab-pane label="SMTP服务">
          <p style="display:flex;
flex-direction: column;
padding-left: 10px;">
            <span>SMTP地址</span>
            <input
              style="margin-top:8px;
width: 1070px;
height: 35px;
border: solid 1px #ccc;
outline: none;
padding-left: 6px;
"
              type="text"
              v-model="di"
            />
          </p>

          <p style="display:flex;
flex-direction: column;
margin-left: 8px;
margin-top: 20px;
">
            <span>SMTP 端口（强制使用 SSL 连接）</span>
            <input
              style="margin-top:8px;width: 1070px;height: 35px;border: solid 1px #ccc;outline: none;padding-left: 10px;"
              v-model="di1"
              type="text"
            />
          </p>

          <p style="display:flex;flex-direction: column;padding-left: 10px;margin-top: 20px;">
            <span>SMTP 用户</span>
            <input
              style="margin-top:8px;width: 1070px;height: 35px;border: solid 1px #ccc;outline: none;"
              v-model="di2"
              type="text"
            />
          </p>

          <p style="display:flex;
flex-direction: column;
padding-left: 10px;
margin-top: 20px;
">
            <span>SMTP 密码</span>
            <a-input-group compact>
              <a-input v-model:value="value" style="width: calc(100% - 33px)" />
              <a-tooltip title="copy git url">
                <a-button>
                  <template #icon>
                    <CopyOutlined />
                  </template>
                </a-button>
              </a-tooltip>
            </a-input-group>
          </p>
          <p style="display:flex;
flex-direction: column;
padding-left: 10px;
margin-top: 20px;
">
            <span>发件人</span>
            <a-input-group compact>
              <a-input v-model:value="value1" style="width: calc(100% - 33px)" />
              <a-tooltip title="copy git url">
                <a-button>
                  <template #icon>
                    <CopyOutlined />
                  </template>
                </a-button>
              </a-tooltip>
            </a-input-group>
          </p>
         
          <p style="padding-left: 10px;
margin-top: 20px;">
            <button
              style="width:80px;height:40px;
background: dodgerblue;border: none;color:#fff"
            >保存</button>
          </p>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { CopyOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  components: {
    CopyOutlined
  },
  setup() {
    const value = ref('https://bwcreation.oss-cn-beijing.aliyuncs.com/2022-04-24/4.png')
    const value1 = ref('https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-favicon.png')
    const tabPosition = ref('left')
    const ci = ref('html,app')
    const xi = ref('html关键字和app关键字')
    const xi1 = ref('')
    const ji = ref('8bd099eec64421b1831043373289e0cb')
    const di = ref('creation.shbwyz.com')
    const di1 = ref('creationadmin.shbwyz.com')
    const di2 = ref('创作平台')
    const ye = ref('{"en":{"zh":"Chinese","en":"English","serverNotAvaliable":"The server is going to launch a rocket for Musk now 🚀","pageMissing":"This page went to space with Bezos","archives":"Archives","total":"Total","totalSearch":"Totally searched ","piece":" Count","passwd":"Password","wrongPasswd":"Wrong Password","protectedArticleMsg":"The article is protected, please enter the access password","backHome":"Back to Home","confirm":"Confirm","unknownTitle":"Unknown Title","articleCover":"Article Cover","publishAt":"Publish At","readings":"Reading","copyrightInfo":"Copyright Information","copyrightContent":"Non-commercial-Attribution-Freely Reprinted","categoryArticle":"Category","gettingArticle":"Fetching articles...","comment":"Comment","gettingKnowledge":"Fetching knowledge books...","knowledgeBooks":"Knowledge Books","readingCount":"reading","startReading":"Start Reading","pleaseWait":"Coming soon","otherKnowledges":"Other Knowledge Books","unknownKnowledgeChapter":"Unknown Chapter","recommendToReading":"Recommended Readings","yu":"About","tagRelativeArticles":"tag related articles","all":"All","readingCountTemplate":"reading","articleCountTemplate":"count","share":"Share","empty":"No data","categoryTitle":"Category","commentNamespace":{"reply":"Reply","emoji":"Emoji","replyPlaceholder":"Please enter the content of the comment (Markdown is supported)","publish":"Send","close":"Close","commentSuccess":"The comment is successful and has been submitted for review","userInfoTitle":"Please set your information","userInfoName":"Username","userInfoNameValidMsg":"Please tell me your name","userInfoEmail":"Email","userInfoEmailValidMsg":"Please enter correct email","userInfoConfirm":"Save","userInfoCancel":"Cancel"},"loading":"Loading","copySuccess":"Copy successfully","copy":"copy","article":"Articles","searchArticle":"Search Articles","searchArticlePlaceholder":"Enter keywords, search articles","shareNamespace":{"title":"Share Poster","createingPoster":"The poster is being generated, please be patient...","createdPosterSuccess":"The poster is completed.","createdPosterError":"Fail to generate poster.","qrcode":"Scan the QR code to read the article","shareFrom":" Original shared from "},"tagTitle":"Tags","toc":"Toc"},"zh":{"zh":"汉语","en":"英文","serverNotAvaliable":"服务器暂时去给马斯克发射火箭去了🚀","pageMissing":"页面和贝佐斯去太空旅行了~~","archives":"归档","total":"共计","totalSearch":"共搜索到","piece":"篇","passwd":"密码","wrongPasswd":"密码错误","protectedArticleMsg":"文章受保护，请输入访问密码","backHome":"回首页","confirm":"确认","unknownTitle":"未知标题","articleCover":"文章封面","publishAt":"发布于","readings":"阅读量","copyrightInfo":"版权信息","copyrightContent":"非商用-署名-自由转载","categoryArticle":"分类文章","gettingArticle":"正在获取文章...","comment":"评论","gettingKnowledge":"正在获取知识...","knowledgeBooks":"知识小册","readingCount":"次阅读","startReading":"开始阅读","pleaseWait":"敬请期待","otherKnowledges":"其他知识笔记","unknownKnowledgeChapter":"未知章节内容","recommendToReading":"推荐阅读","yu":"与","tagRelativeArticles":"标签有关的文章","all":"所有","readingCountTemplate":"次阅读","articleCountTemplate":"篇文章","share":"分享","empty":"暂无数据","categoryTitle":"文章分类","commentNamespace":{"reply":"回复","emoji":"表情","replyPlaceholder":"请输入评论内容（支持 Markdown）","publish":"发布","close":"收起","commentSuccess":"评论成功，已提交审核","userInfoTitle":"请设置你的信息","userInfoName":"名称","userInfoNameValidMsg":"请输入您的称呼","userInfoEmail":"邮箱","userInfoEmailValidMsg":"输入合法邮箱地址，以便在收到回复时邮件通知","userInfoConfirm":"设置","userInfoCancel":"取消"},"loading":"加载中","copySuccess":"复制成功","copy":"复制","article":"文章","searchArticle":"文章搜索","searchArticlePlaceholder":"输入关键字，搜索文章","shareNamespace":{"title":"分享海报","createingPoster":"海报生成中，请耐心等待...","createdPosterSuccess":"分享海报制作完成。","createdPosterError":"分享海报制作失败，请手动截图","qrcode":"识别二维码查看文章","shareFrom":" 原文分享自"},"tagTitle":"文章标签","toc":"目录"}}')
    return {
      tabPosition,
      CopyOutlined,
      value1,
      value,
      di,
      di1,
      di2,
      ye,
      ci,
      xi,
      xi1,
      ji
    }
  }


})
</script>

<style lang='scss' scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;

  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>